<template>
	<view id="addWechat">
		<uni-popup ref="popup" :show="consult" type="bottom" class="addfweicaht">
			<view class="addcard">
				<view class="addcontent">
					<navigator class="closemask">
						<image :src="`${constant.imgUrl}design/addfriclose.png`"></image>
					</navigator>
					<view class="add_top">
						<image class="desinhead"></image>
						<view class="add_topname">
							<view>用户昵称</view>
							<view class="p">
								<text>用户地址</text>
								<text class="em"></text>
								<text>用户角色名称</text>
							</view>
						</view>
						<view class="weqcode">
							<view>加好友享受一对一服务</view>
							<view class="weimg">
								<image></image>
							</view>
							<view class="tips">
								<view>
									<text class="em">方式1：</text>
									<text class="span">【长按】识别图中二维码或扫描二维码。</text>
								</view>
								<view>
									<text class="em">方式2：</text>
									<text class="span">
										点击【复制】按钮或长按微信号选择复制, 打
										开微信添加好友。
									</text>
								</view>
							</view>
						</view>
					</view>
					<view class="addbottom">
						<text class="span">
							微信：
							<text id="weiinid">微信号</text>
						</text>
						<navigator>复制</navigator>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
// #ifdef H5
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
// #endif
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	name: 'add-wechat',
	components: {
		uniPopup
	},
	data() {
		return {
			consult: false,
			showMask: false,
			constant: this.$constant

		}
	},
	methods: {
		show() {
			this.$refs.popup.open()
		},
		hide() {
			// this.consult = false
			this.$refs.popup.close()
		}
	}
}
</script>

<style scoped>
.addcard {
    width: 670px;
    height: 832px;
    background: white;
    border-radius: 20px;
    background: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/addback.png");
    background-size: 100% 100%;
}

.addfweicaht {
    border-radius: 20px;
}

.closemask {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 39px;
    top: 39px;
}

.closemask image {
    width: 30px;
    height: 30px;
}

.addcontent {
    width: 610px;
    height: 100%;
    margin-left: 30px;
    float: left;
    margin-right: 30px;
}

.add_top {
    height: 100px;
    width: auto;
    margin-top: 56px;
}

.desinhead {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #CCCCCC;
}

.add_topname {
    margin-top: 8px;
    height: auto;
    margin-left: 19px;
    width: 78%;
}

/* .add_topname .p:nth-child(1) {
    font-size: 40px;
    text-align: left;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 1; */
    /* autoprefixer: ignore next */
    /* -webkit-box-orient: vertical; */
    /* autoprefixer: on */
    /* overflow: hidden;
    text-overflow: ellipsis;
} */

/* .add_topname .p:nth-child(2) {
    font-size: 24px;
    color: rgb(102, 102, 102);
    margin-top: 4px;
    text-align: left;
} */

/* .add_topname p:nth-child(2) em {
    height: 24px;
    width: 2px;
    float: left;
    background: rgb(204, 204, 204);
    margin: 5px 8px;
} */

.weqcode {
    width: 100%;
    height: auto;
    margin-top: 62px;
    text-align: center;
    font-size: 32px;
}

.weimg {
    width: 248px;
    height: 248px;
    float: left;
    margin-top: 49px;
    margin-left: 190px;
    border: 2px solid #CCCCCC;
}

.weimg image {
    width: 100%;
    height: 100%;
}

.tips {
    margin-top: 39px;
    width: 100%;
    height: auto;
    font-size: 26px;
    line-height: 40px;
}

.tips .span {
    width: 83%;
    text-align: left;
}

.addbottom {
    width: 610px;
    height: 90px;
    position: absolute;
    bottom: 0;
    line-height: 90px;
    font-size: 30px;
}

.addbottom .span {
    color: rgb(51, 51, 51);
}

.addbottom navigator {
    width: 140px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 30px;
    background: white;
    border: 2px solid rgb(221, 221, 221);
    margin-top: 15px;
}
</style>
